<#include "/common/head.ftl">

<@showTitle title="${i18n.getMessage('student')} > ${i18n.getMessage('search')}"></@showTitle>

<form action="student/searchStudent.sgt" onsubmit="submitForm(this); return false;">
	<table id="dataTable" align="center" cellpadding="0" cellspacing="5" style="margin-left: 100px;">
		<tr>
			<td class="name">${i18n.getMessage('firstName')}: </td>
			<td><input type="text" name="firstName" value="${(searchStudent.firstName)!}" style="width:200px"/> </td>
		</tr>
		<tr>
			<td class="name">${i18n.getMessage('lastName')}: </td>
			<td><input type="text" name="lastName" value="${(searchStudent.lastName)!}" style="width:200px"/> </td>
		</tr>
		<tr>
			<td class="name">${i18n.getMessage('nickName')}: </td>
			<td><input type="text" name="nickName" value="${(searchStudent.nickName)!}" style="width:200px"/> </td>
		</tr>
		<tr>
			<td class="name">${i18n.getMessage('gender')}: </td>
			<td>
				<input type="radio" name="gender" value="MALE"/> ${i18n.getMessage('gender.male')}
				<input type="radio" name="gender" value="FEMALE"/> ${i18n.getMessage('gender.female')}
			</td>
		</tr>
		<tr>
			<td class="name">${i18n.getMessage('dateOfBirth')}: </td>
			<td><input type="text" name="dateOfBirth" value="${(searchStudent.dateOfBirth?date)!}" style="width:200px"/><img class="calendarImg" src="images/calendar/calendar.gif" onclick="displayCalendar(document.forms[0].dateOfBirth, '${i18n.getMessage('format.date')}', this)"/></td>
		</tr>
		<tr>
			<td class="name">${i18n.getMessage('address')}: </td>
			<td><input type="text" name="address" value="${(searchStudent.address)!}" style="width:200px"/></td>
		</tr>
		<tr>
			<td class="name">${i18n.getMessage('email')}: </td>
			<td><input type="text" name="email" value="${(searchStudent.email)!}" style="width:200px"/></td>
		</tr>
		<tr>
			<td class="name">${i18n.getMessage('phoneNumber')}: </td>
			<td><input type="text" name="phoneNumber" value="${(searchStudent.phoneNumber)!}" style="width:200px"/></td>
		</tr>
		<tr>
			<td class="name">${i18n.getMessage('type')}:</td>
			<td>
				<select name="typeId" style="width:204px">
					<option></option>
					<#list types as type>
						<option value="${(type.id)!}" <#if (type = (searchStudent.type)!)>selected</#if> >${(type.name)!}</option>
					</#list>
				</select>
			</td>
		</tr>
		<tr>
			<td class="name">${i18n.getMessage('scholarship')}:</td>
			<td>
				<select name="scholarshipId" style="width:204px">
					<option></option>
					<#list scholarships as scholarship>
						<option value="${(scholarship.id)!}" <#if (scholarship = (searchStudent.scholarship)!)>selected</#if> style="<@formatOnScholarship scholarship/>">${(scholarship.name)!}</option>
					</#list>
				</select>
				<span class="pop-container" id="pop"><div class="pop-container">
					<table cellspacing="4" align="center" cellpadding="0" width="340">
						<tr>
							<td class="name" width="100">${i18n.getMessage('school')}</td>
							<td>
								<select class="w020" onchange="showName(this)">
									<#list schoolNames as schoolName>
										<option value="${(schoolName.title)!}">${(schoolName.title)!}</option>
									</#list>
									<option value="other">Other:</option>
								</select>
								<input type="text" id="sname" name="school" class="w175" />
							</td>
						</tr>
						<tr>
							<td class="name">${i18n.getMessage('class')}</td>
							<td><input type="text" name="clazz" class="w200" /></td>
						</tr>
						<tr>
							<td class="name">${i18n.getMessage('studiedEnglishCenter')}</td>
							<td><input type="text" name="studiedEnglishCenter" class="w200" /></td>
						</tr>
						<tr>
							<td class="name" class="w200" name="schoolGradeId">${i18n.getMessage('grade')}</td>
							<td><select name="schoolGradeId" class="w200">
								<option></option>
								<#list schoolGrades as schoolGrade>
								<option value="${(schoolGrade.id)!}">${(schoolGrade.title)!}</option>
								</#list>
							</select></td>
						</tr>
					</table>					
				</div></span>
			</td>
		</tr>
		<tr>
			<td class="name">Consulted Date:</td>
			<td><input type="text" name="consultedDate" value="${(searchStudent.consultedDate?date)!}" style="width:200px"/><img class="calendarImg" src="images/calendar/calendar.gif" onclick="displayCalendar(document.forms[0].consultedDate, '${i18n.getMessage('format.date')}', this)"/></td>
		</tr>
		<tr>
			<td class="name">${i18n.getMessage('fromConsultedDate')}: </td>
			<td><input type="text" name="fromConsultedDate" value="${(searchStudent.fromConsultedDate?date)!}" style="width:200px"/><img class="calendarImg" src="images/calendar/calendar.gif" onclick="displayCalendar(document.forms[0].fromConsultedDate, '${i18n.getMessage('format.date')}', this)"/></td>
		</tr>
		<tr>
			<td class="name">${i18n.getMessage('toConsultedDate')}: </td>
			<td><input type="text" name="toConsultedDate" value="${(searchStudent.toConsultedDate?date)!}" style="width:200px"/><img class="calendarImg" src="images/calendar/calendar.gif" onclick="displayCalendar(document.forms[0].toConsultedDate, '${i18n.getMessage('format.date')}', this)"/></td>
		</tr>
		<tr>
			<td class="name">${i18n.getMessage('program')}:</td>
			<td>
				<select name="programId" style="width:204px">
					<option></option>
					<#list programs as program>
						<option value="${(program.id)!}" <#if (program = (searchStudent.program)!)>selected</#if> >${(program.name)!}</option>
					</#list>
				</select>
			</td>
		</tr>
		<tr>
			<td class="name">Test Date:</td>
			<td><input type="text" name="testDate" value="${(searchStudent.testDate?date)!}" style="width:200px"/><img class="calendarImg" src="images/calendar/calendar.gif" onclick="displayCalendar(document.forms[0].testDate, '${i18n.getMessage('format.date')}', this)"/></td>
		</tr>
		<tr>
			<td class="name">${i18n.getMessage('testTime')}</td>
			<td>
				<select name="placementShiftId" style="width:204px">
					<option></option>
					<#list shifts as shift>
						<option value="${(shift.id)!}">${(shift.startTime?time)!}-${(shift.endTime?time)!}</option>
					</#list>
				</select>
			</td>
		</tr>
		<tr>
			<td class="name">${i18n.getMessage('Consultant')}:</td>
			<td>
				<select name="consultantId" style="width:204px">
					<option></option>
					<optgroup label="Active">
						<#list consultants as consultant>
							<#if consultant.active>
								<option value="${(consultant.id)!}" style="<@formatOnConsultant consultant/>">${(consultant.fullName)!}</option>								
							</#if>
						</#list>					
					</optgroup>
					<optgroup label="Inactive">
						<#list consultants as consultant>
							<#if !consultant.active>
								<option value="${(consultant.id)!}" style="<@formatOnConsultant consultant/>">${(consultant.fullName)!}</option>								
							</#if>
						</#list>					
					</optgroup>
				</select>
			</td>
		</tr>
		<tr>
			<td class="name" style="vertical-align:top">${i18n.getMessage('comment')}: </td>
			<td><textarea name="comment" style="width:350px;height:80px">${(searchStudent.comment)!}</textarea></td>
		</tr>
		<tr>
			<td class="name"></td>
			<td>
				<input type="submit" value="${i18n.getMessage('search')}" class="button_style"/> 
				<input type="reset" value="${i18n.getMessage('reset')}" class="button_style"/> 
			</td>
		</tr>
	</table>
</form>

<script>	
	showName = function(selector) {
		if (selector.value == "other") {
			$('sname').value = "";
		}
		else $('sname').value = selector.value;
	};
</script>